<template>
	<view>
		<u-navbar :border-bottom="false" :is-back="true" title="消息中心">
		</u-navbar>
		<u-search bg-color='#FFFFFF' v-model="query.title" placeholder="请输入消息标题进行搜索" margin="35rpx" @custom="search"
			@search="search"></u-search>
		<scroll-view class="scroll-list" scroll-y="true" @scrolltolower="loadMore">
			<u-cell-group>
				<u-cell-item :arrow="false" v-for="msg of list"
				    :key="msg.id"
					@click="viewMessageDetails(msg)">
					<view slot='title'>
						<view>
							<text>{{msg.title}}</text>
						</view>
					</view>
					<view slot="label">
						<view>
							<text>发送人: {{msg.sender}}</text>
						</view>
					</view>
					<u-badge :isDot="true" slot="right-icon" v-if="!msg.readFlag"></u-badge>
				</u-cell-item>
			</u-cell-group>
		</scroll-view>
		<view class="loadmore" @click="loadMore">
			<u-loadmore :status="loadStatus"></u-loadmore>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				query: {
					current: 1,
					size: 20,
					title: ''
				},
				loadStatus: 'loadmore',
				list: [],
				total: 0,
			};
		},
		onLoad() {
			this.loadList()
		},
		methods: {
			viewMessageDetails(msg) {
				let params = JSON.stringify({ Authorization: this.vuex_token})
				let msgurl = this.$u.api.getBaseUrl() + `/sys/announce/show/${msg.anntId}`
				uni.navigateTo({
					url: '/pages/common/webview?url=' +
						`${msgurl}&params=${params}`
				})
			},
			loadMore() {
				this.loadStatus = "loading";
				setTimeout(() => {
					this.query.current += 1;
					this.loadList();
				}, 100);
			},
			loadList() {
				this.$u.api.getMyAnnouncementSendPage(this.query).then(res => {
					if (!res.records || res.records.length == 0) {
						this.loadStatus = "nomore";
						return;
					}
					this.list = this.list.concat(res.records);
					this.total = res.total;
					this.query.current = res.current;
					this.query.size = res.size;
					this.loadStatus = "loadmore";
				});
			},
			search(value) {
				this.list = [];
				this.query.current = 0;
				this.loadList();
			},
		}
	};
</script>
<style lang="scss">
	page {
		background-color: $u-bg-color;
	}
</style>
<style lang="scss" scoped>
	page {
		height: 100%;
		background-color: $u-bg-color;
	}

	.u-card-wrap {
		padding: 1px;
	}

	.title {
		font-size: 28rpx;
		font-weight: bold;
		color: $u-main-color;
		line-height: 50rpx;
		margin-left: 20rpx;
	}

	.icon {
		width: 40rpx;
		height: 40rpx;
		display: inline-block;
		vertical-align: middle;
	}

	.msg-list {
		.msg-content {
			font-size: 24rpx;
			font-weight: 400;
			color: $u-main-color;
			line-height: 34px;
			margin-left: 20px;
		}
	}

	.form-list {
		padding: 10rpx 0px 30rpx 0px;

		.icon {
			width: 15px;
			height: 15px;
			vertical-align: middle;
		}

		.form-name {
			height: 21px;
			font-size: 14px;
			font-weight: 400;
			color: $u-main-color;
			line-height: 25px;
			vertical-align: middle;
		}
	}

	.text-btn {
		font-size: 24rpx;
		font-weight: 400;
		color: $u-content-color;
		line-height: 34px;
		display: inline-block;
	}

	.dot {
		width: 10rpx;
		height: 10rpx;
		background: #F67F29;
		display: inline-block;
		border-radius: 40rpx;
		vertical-align: middle;
	}

	.workflow-body {
		margin: 10rpx 0px 30rpx 0px;

		.count {
			font-size: 24px;
			font-weight: 500;
			color: #3B93FF !important;
			display: block;
			line-height: 34px;
			text-align: center;
		}

		.desc {
			display: block;
			text-align: center;
		}
	}

	.fun-btn {
		width: 165px;
		height: 47px;
		vertical-align: middle;
		line-height: 47px;
		color: $u-main-color;
		border: 1px solid $u-border-color;
		border-radius: 10px;
		background-color: #ffffff;
	}
</style>
